<%@ page language="java" contentType="text/html; charset=UTF-8"  pageEncoding="UTF-8"%> 
<%@ include file="/WEB-INF/jsp/struts/taglibs.jsp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="style/alternative.css" media="all" rel="stylesheet" />
<link rel="stylesheet" type="text/css" media="all" href="script/jscalendar-1.0/calendar-win2k-cold-1.css" title="win2k-cold-1" />
<script type="text/javascript" src="script/prototype.js"></script>
<script type="text/javascript"  src="script/common.js"></script>

<script type="text/javascript" src="script/jscalendar-1.0/calendar.js"></script>
<script type="text/javascript" src="script/jscalendar-1.0/lang/calendar-zh.js"></script>
<script type="text/javascript" src="script/jscalendar-1.0/calendar-setup.js"></script>
<style type="text/css">
#taskform {
    padding-left:0
}

#taskBox table {
    border:2px groove #CCC;
}

#taskBox td{
padding:2px;
border:1px solid #CCC;
white-space:normal;
background-color:#eee;
border:2px groove #369;
overflow:auto;
list-style-position:inside;
font-family:Arial, Helvetica, sans-serif;
font-size:1em;
line-height:1.2em;
}
#remindDiv,#projectDiv, #dailyDiv,#weeklyDiv,#monthlyDiv,#yearlyDiv {
    display: none;
    border: 1px solid #EEE
}
#remindDiv {
    padding-left:3em;
    font-size: 0.9em;
}
#repeatTab ul { 
    padding-left:1em;
    list-style-position:inside;
    list-style-type:none;
}

#projectTab { 
    border:0px;
    
}
#subTaskList { 
    width:20em;
    
}
#subTaskDiv input {
    width:10em;
}
.require {
    color:red;
}
</style>
<script language="Javascript">
function checkvalue() {
	return true;
}
function showDiv(divId) {
    document.getElementById(divId).style.display ="block";  
}
function hideDiv(divId) {
    document.getElementById(divId).style.display ="none";  
}
var count1 = 0;
var count2 = 0;

function insertOptionBefore(num)
{
  var elSel = document.getElementById('subTaskList');
  if (elSel.selectedIndex >= 0) {
    var elOptNew = document.createElement('option');
    elOptNew.text = $F("newTaskName");
    elOptNew.value =$F("newTaskID");
    var elOptOld = elSel.options[elSel.selectedIndex];  
    try {
      elSel.add(elOptNew, elOptOld); // standards compliant; doesn't work in IE
    }
    catch(ex) {
      elSel.add(elOptNew, elSel.selectedIndex); // IE only
    }
  }
}

function removeOptionSelected()
{
  var elSel = document.getElementById('subTaskList');
  var i;
  for (i = elSel.length - 1; i>=0; i--) {
    if (elSel.options[i].selected) {
      elSel.remove(i);
    }
  }
}

function appendOptionLast(num)
{
  var elOptNew = document.createElement('option');
  elOptNew.text = $F("newTaskName");
  elOptNew.value = $F("newTaskName");
  var elSel = document.getElementById('subTaskList');

  try {
    elSel.add(elOptNew, null); // standards compliant; doesn't work in IE
  }
  catch(ex) {
    elSel.add(elOptNew); // IE only
  }
}

function removeOptionLast()
{
  var elSel = document.getElementById('subTaskList');
  if (elSel.length > 0)
  {
    elSel.remove(elSel.length - 1);
  }
}

function submitForm() {
  var elSel = document.getElementById('subTaskList');
  for (var i = elSel.length - 1; i>=0; i--) {
    elSel.options[i].selected = true;
    
  }

    var f = $("taskForm");

    f.submit();

}
function doAction(imethod, taskID) {
    if(imethod == 'delete') {
        var ret = confirm("你确信删除这项任务吗?");
        if(ret) {
            location.href = "task.htm?method=delete&taskID=" + taskID;
        }
    } else {
        location.href = "task.htm?method=" + imethod + "&taskID=" + taskID;
    }
}
</script>
</head>
<body>
<c:set var="now" value="<%=new java.util.Date()%>" />
<c:choose>
<c:when test="${empty task}">
<c:set var="handler" value="task.htm?method=create" />
<c:set var="beginTime" value="${now}" />
<c:set var="deadline" value="<%=new java.util.Date((System.currentTimeMillis() + 21600000))%>" />
<c:set var="duration" value="60" />
</c:when>
<c:otherwise>
<c:set var="handler" value="task.htm?method=update" />
<c:set var="beginTime" value="${task.beginTime}" />
<c:set var="deadline" value="${task.deadline}" />
<c:set var="duration" value="${task.duration}" />
</c:otherwise>
</c:choose>
<div id="content">
<div id="content_inner">
<form name="taskform" id="taskform" action="${handler}"  method="post" onsubmit="return(checkvalue());">
<!-- <div id="trail">* <a href="task.htm?method=list">任务管理</a> -&gt; 增加任务</div>
 -->
<br/>
<INPUT name="taskID" TYPE="hidden" value="${task.taskID}">
<TABLE  width="100%" cellspacing="4" cellpadding="4" id="taskBox" class="its">
<thead>
  <TR>
    <TH colspan="3" align="center"><strong>任务</strong></TH>
  </TR></thead>
<TR>
    <TD width="30%" align="right">任务名称</TD>
    <TD colspan="2" nowrap><INPUT NAME="taskName" size="60" TYPE="text" 
    value="${task.taskName}">&nbsp;<span class="require">*</span>
    </TD>
</TR>
<TR>
    <TD align="right">任务描述</TD>
    <TD  colspan="2" nowrap>
    <TEXTAREA NAME="description" ROWS="4" COLS="50">${task.description}</TEXTAREA>&nbsp;<span class="require">*</span></TD>
</TR>
<TR>
    <TD align="right" width="30%">任务类型</TD>
    <TD width="30%">
<select name="taskType" id="taskType">
<option value="0">未定义</option>
<option value="1">马上就做</option>
<option value="2">按时去做</option>
<option value="3">等人去做</option>
</select></TD>
<td width="30%"rowspan="9" valign="top" id="repeatTab">
<INPUT TYPE="hidden" NAME="repeatID" ID="repeatID" value="${task.repeatID}">
<ul>是否重复? 
<li><INPUT TYPE="radio" NAME="isRepeat"  onclick="hideDiv('dailyDiv')" value="no" checked>不循环
<li><INPUT TYPE="radio" NAME="isRepeat" onclick="showDiv('dailyDiv');setValue('repeatType','daily')" value="yes">循环
<!-- <li><INPUT TYPE="radio" NAME="repeatType" value="2">按周重复
<li><INPUT TYPE="radio" NAME="repeatType" value="3">按月重复
<li><INPUT TYPE="radio" NAME="repeatType" value="4">按年重复
 -->
</ul>
<div id="dailyDiv">
<ul>
<li><input type="radio" name="repeatType" id="repeatType1" tabindex="14" value="daily" /> 
每<input type="text" name="repeatInterval" maxlength="3" size="5" tabindex="15" value="1" onchange="document.taskForm.RepeatDayType[0].checked=true;" />天
<li><input type="radio" name="repeatType" id="repeatType2" tabindex="15" value="workdaily" /> 每工作日
</ul>
<br>
<div id="endDate">
<ul id="endText">
<li><input type="radio" name="repeatEndType" id="repeatEndType1" tabindex="20" value="noEndDate" checked />无结束日期</li>
<li><input type="radio" name="repeatEndType" id="repeatEndType2" tabindex="20" value="hasEndDate" /> 结束于</li>
<ul>
<li>日期: <INPUT TYPE="text" NAME="repeatEndTime"  ID="repeatEndTime"><input type='button' id='trigger4' value='...' /></li>
<li>次数: <INPUT TYPE="text" NAME="repeatTimes" id="repeatTimes"></li>
</ul>
</ul>
</div>
</div>
<div id="weeklyDiv">尚不支持</div>
<div id="monthlyDiv">尚不支持</div>
<div id="yearlyDiv">尚不支持</div>
<BR>
<ul>需要提醒? 
<li><INPUT TYPE="radio" NAME="isRemind" value="no" onclick="hideDiv('remindDiv')" checked>不要提醒
<li><INPUT TYPE="radio" NAME="isRemind" value="yes" onclick="showDiv('remindDiv')">需要提醒
</ul>
<div id="remindDiv">
于 <input NAME="remindTime" size="20" type='text' id='remindTime' 
    value="<fmt:formatDate value='${task.beginTime}' pattern='yyyy-MM-dd HH:mm:ss'/>"/>
<input type='button' id='trigger5' value='...' />
</div>
</td>
</TR>

<TR>
    <TD align="right">优先级</TD>
    <TD>
<select name="priority" id="priority">
<option value="1">重要且紧急</option>
<option value="2">重要不紧急</option>
<option value="3">紧急不重要</option>
<option value="4">不重要不紧急</option>
</select></TD>
</TR>
<TR>
    <TD align="right">类别</TD>
    <TD>
<SELECT NAME="categoryID" id="categoryID">
<c:forEach items="${categories}" var="entry">
        <OPTION VALUE="${entry.key}">${entry.value.description}
 </c:forEach>
</SELECT>
</TD>
</TR>
<TR>
    <TD align="right">环境</TD>
    <TD>
<select name="contextID" id="contextID">
<c:forEach items="${contexts}" var="entry">
        <OPTION VALUE="${entry.key}">${entry.value.description}
 </c:forEach>
 </select>
 </TD>
</TR>
<TR>
    <TD align="right">精力</TD>
    <TD>
<select name="energy" id="energy">
<option value="90">充沛</option>
<option value="60">一般</option>
<option value="30">疲倦</option>
</select></TD>
</TR>
<TR>
    <TD align="right" nowrap>持续时间</TD>
    <TD><div><input NAME="duration" size="5" type='text' id="duration" value="${duration}"/> 分钟
    &nbsp;<span class="require">*</span></div></TD>

</TR>
<TR>
    <TD align="right">开始时间</TD>
    <TD><input NAME="beginTime" size="20" type='text' id='beginTime' 
    value="<fmt:formatDate value='${beginTime}' pattern='yyyy-MM-dd HH:mm:ss'/>"/>
    <input type='button' id='trigger2' value='...' />
</TD>
</TR>
<TR>
    <TD align="right">最后期限</TD>
    <TD><div>
    <input NAME="deadline" size="20" type='text' id='deadline' 
    value="<fmt:formatDate value='${deadline}' pattern='yyyy-MM-dd HH:mm:ss'/>"/>
    <input type='button' id='trigger1' value='...' /></div>
<input NAME="createTime" size="20" type='hidden' 
    value="<fmt:formatDate value='${task.createTime}' pattern='yyyy-MM-dd HH:mm:ss'/>"/>
    </TD>

</TR>
<TR>
    <TD align="right">结束时间</TD>
    <TD><input NAME="endTime" size="20" type='text' id='endTime' 
    value="<fmt:formatDate value='${task.endTime}' pattern='yyyy-MM-dd HH:mm:ss'/>"/>
    <input type='button' id='trigger3' value='...' />
</TD>
</TR>
<TR>
    <TD align="right">作为项目</TD>
    <TD colspan="2"> 
    <INPUT TYPE="radio" NAME="isProject"  onclick="showDiv('projectDiv')" value="1">是
    <INPUT TYPE="radio" NAME="isProject"  onclick="hideDiv('projectDiv')" value="0" checked>否
    
    <div id="projectDiv">
    <TABLE width="80%" id="projectTab">
<TR>
<TD width="70%">
<select name="subTaskList" id="subTaskList" size="10" multiple="multiple">
<option value="task1" selected="selected">Task1</option>
<option value="task2">Task2</option>
</select>
</TD>
<TD align="left">
<INPUT TYPE="text" NAME="newTaskName" ID="newTaskName" value="newTestTask" size="20">
<INPUT TYPE="hidden" NAME="newTaskID" ID="newTaskID" value="0">
<br/><br/>
<div id="subTaskDiv">
<input type="button" value="在前面插入子任务" onclick="insertOptionBefore(count1++);" />
<br/>
<input type="button" value="删除所选择子任务" onclick="removeOptionSelected();" />
<br/>
<input type="button" value="在后面追加子任务" onclick="appendOptionLast(count2++);" />
<br/>
<input type="button" value="在后面删除子任务" onclick="removeOptionLast();" />
</div>
</TD>
</TR>
</TABLE>

    </div>
    </TD>
</TR>
<TR>
    <TD colspan="3" align="center" class="title">
        <INPUT name="action" TYPE="hidden" value="insert">
        <INPUT TYPE="submit" id="save" value="保存">
    <c:if test="${not empty task}">
    &nbsp;&nbsp;
    <INPUT TYPE="button" id="delete" value="删除" onclick="javascript: doAction('delete',${task.taskID})">
    </c:if>
    &nbsp;&nbsp;
    <INPUT TYPE="button" id="back" value="返回" onclick="javascript:history.back();"></TD>
</TR>
</TABLE>
</form>       

<script type="text/javascript">
    Calendar.setup({
        inputField     :    "deadline",      // id of the input field
        ifFormat       :    "%Y-%m-%d %H:%M:00",       // format of the input field
        showsTime      :    true,            // will display a time selector
        button         :    "trigger1",   // trigger for the calendar (button ID)
        singleClick    :    false,           // double-click mode
        step           :    1                // show all years in drop-down boxes (instead of every other year as default)
    });
    Calendar.setup({
        inputField     :    "beginTime",      // id of the input field
        ifFormat       :    "%Y-%m-%d %H:%M:00",       // format of the input field
        showsTime      :    true,            // will display a time selector
        button         :    "trigger2",   // trigger for the calendar (button ID)
        singleClick    :    false,           // double-click mode
        step           :    1                // show all years in drop-down boxes (instead of every other year as default)
    });
    Calendar.setup({
        inputField     :    "endTime",      // id of the input field
        ifFormat       :    "%Y-%m-%d %H:%M:00",       // format of the input field
        showsTime      :    true,            // will display a time selector
        button         :    "trigger3",   // trigger for the calendar (button ID)
        singleClick    :    false,           // double-click mode
        step           :    1                // show all years in drop-down boxes (instead of every other year as default)
    });
    Calendar.setup({
        inputField     :    "repeatEndTime",      // id of the input field
        ifFormat       :    "%Y-%m-%d %H:%M:00",       // format of the input field
        showsTime      :    true,            // will display a time selector
        button         :    "trigger4",   // trigger for the calendar (button ID)
        singleClick    :    false,           // double-click mode
        step           :    1                // show all years in drop-down boxes (instead of every other year as default)
    });
    Calendar.setup({
        inputField     :    "remindTime",      // id of the input field
        ifFormat       :    "%Y-%m-%d %H:%M:00",       // format of the input field
        showsTime      :    true,            // will display a time selector
        button         :    "trigger5",   // trigger for the calendar (button ID)
        singleClick    :    false,           // double-click mode
        step           :    1                // show all years in drop-down boxes (instead of every other year as default)
    });
</script>
   </div><!-- end content_inner -->
</div><!-- end content -->

<script language="Javascript">
<c:if test="${not empty task and param.method eq 'retrieve' }">
var form = $('taskform'); 
// cycle between calling form.disable() and form.enable() 
form[form.disabled ? 'enable' : 'disable'](); 
form.disabled = !form.disabled;
document.getElementById("back").disabled=false;

</c:if>
//<!-- add task -->
<c:if test="${empty task}">
var defaultPriority = 2;
toSelect("priority",defaultPriority);

var defaultTaskType = 2;
toSelect("taskType",defaultTaskType);

var defaultCategoryID = 2;
toSelect("categoryID",defaultCategoryID);

var defaultContextID = 2;
toSelect("contextID",defaultContextID);
</c:if>
//<!-- edit task -->
<c:if test="${not empty task}">
var defaultContextID = "" + "${task.contextID}";
toSelect("contextID",defaultContextID);

var defaultEnergy = "" + "${task.energy}";
toSelect("energy",defaultEnergy);

var defaultPriority = "" + "${task.priority}";
if(defaultPriority==0) {
	defaultPriority==4
}
toSelect("priority",defaultPriority);

var defaultCategoryID = "" + "${task.categoryID}";
toSelect("categoryID",defaultCategoryID);

var defaultTaskType = "" + "${task.taskType}";
toSelect("taskType",defaultTaskType);

var onRepeatInfoFound = function(data) {
    var repeatInfo = data;
    if(repeatInfo.alwaysRepeat==0) {
    	setValue("repeatEndType","hasEndDate");
    	if(repeatInfo.expireTime) { 
    	    setValue("repeatEndTime",repeatInfo.expireTime.pattern("yyyy-MM-dd hh:mm:ss"));
        }
    } 
}
var theRepeatID = "" + "${task.repeatID}";
if(theRepeatID==0) {
	setValue("isRepeat","no");	
} else {
	setValue("isRepeat","yes"); 
	setValue("repeatType","daily"); 
	showDiv('dailyDiv');
    DWRService.getRepeatInfo(theRepeatID, onRepeatInfoFound);
}
//---------------------remind-------------------
var onRemindFound = function(data) {
    var remindInfo = data;
    setValue("remindTime",remindInfo.remindTime.pattern("yyyy-MM-dd hh:mm:ss"));
}
var theRemindID = "" + "${task.remindID}";
if(theRemindID==0) {
    setValue("isRemind","no");  
} else {
    setValue("isRemind","yes"); 
    showDiv('remindDiv');
    DWRService.getRemind(theRemindID, onRemindFound);
}
</c:if>
</script>
